<template>
  
    <div class="container">

      <div class="top">
        <current ref="current" :checked="checked" :WarnValue_C2H4="WarnValue_C2H4" :tel="tel"></current>

      </div>

      <div class="bottom">
        
        <history_c2h4 ref="history_c2h4"></history_c2h4>
      </div>

      <div class="controlBar">
        <div class="left">
          每隔
          <a-input-number v-model="number2" :min="1" :max="100000" :step="1" @change="onChange2"
            :formatter="(value) => `${value}秒`" :parser="(value) => value.replace(/秒/g, '')" />
          刷新一次
        </div>



        <div style="padding-right: 3rem;">
          <div style=" display: flex;align-items:center;padding-bottom: 0.6rem;">


            <div>
              <span style="padding-right: 0.6rem">C2H4报警阈值（高位）</span>
              <a-input-number v-model="WarnValue_C2H4" :min="0" :max="100" :step="0.1" @change="setWarnValue_C2H4" />
            </div>

          </div>

          <div style=" display: flex;align-items:center;">
            <span style="padding-right: 0.6rem">手机号</span>
            <a-input v-model="tel" @change="setTel" />
            <div style="display: flex; flex-direction: row-reverse;padding-left: 0.6rem;">
            <a-switch @change="checkedChange" v-model="checked" checked-children="短信报警已开启"
              un-checked-children="短信报警已关闭" />
          </div>
          </div>
       
        </div>


        <div class="right">
   
  
         
          <div>

         <div>
          <span style="width:4rem">C2H4工控机地址</span>
            <a-input :value="address_C2H4" @change="change_C2H4"></a-input>


            <a-button @click="close" v-show="IsStartCircle">取消</a-button><a-button @click="open" type="primary"
              v-show="!IsStartCircle">确定</a-button>
         </div>
         <div style="display: flex;align-items: center;">
            <div class="status" :style="`background-color:${statusColor2}`"></div>
            <span>{{ netStatus2 }}</span>
          </div>


          </div>
        </div>



      </div>
    </div>


</template>

<script>
import current from "./c2h4/current.vue";

import history_c2h4 from "./c2h4/history_c2h4.vue";


export default {
  components: {
    current,history_c2h4
  },
  mounted() {


    let address_C2H4 = localStorage.getItem("address_C2H4");
    
    this.tel = localStorage.getItem("tel") || "";

    this.WarnValue_C2H4 = localStorage.getItem("WarnValue_C2H4") || 1.2;

    let isDev = process.env.NODE_ENV !== "production";


    if (
      address_C2H4 == null ||
      address_C2H4 == "null" ||
      address_C2H4 == undefined ||
      address_C2H4 == "" ||
      address_C2H4 == "undefined"
    ) {
      if (isDev) {
        this.address_C2H4 = "127.0.0.1";
      } else {
        this.address_C2H4 = "192.168.10.177";
      }
    } else {
      this.address_C2H4 = address_C2H4;
    }


    this.$ipcRenderer.on_connect_reply_C2H4(
      (type) => {

        if (type == "DF") {
           this.netStatus2 = "未连接";
           this.statusColor2 = "red";
        }
   
      }
    );
  },
  data() {
    return {

      address_C2H4: "127.0.0.1",
      number2: 30,
      circleInterval: null,
      checked: false,

      WarnValue_C2H4:1.2,

      tel: "",
      IsStartCircle: false,

      netStatus2:"未连接",
      statusColor2:"red",

    };
  },
  methods: {


    status_connected2() {
      this.netStatus2 = "已连接";
      this.statusColor2 = "green"
    },
    status_disconnected2() {
      this.netStatus2 = "未连接";
      this.statusColor2 = "red"

    },



    setWarnValue_C2H4(e) {
      this.WarnValue_C2H4 = e.target.value;
      localStorage.setItem("WarnValue_C2H4", e.target.value);
    },

    refresh() {



      this.$refs.history_c2h4.getData();
     

    },



    open() {
      this.$ipcRenderer.send("connectServer_coc2h4", {address_CO:null,address_C2H4:this.address_C2H4});
this.status_connected2()
      setTimeout(() => {
        this.startCircle();
        this.IsStartCircle = true;
      }, 600);
    },
    close() {
      this.$ipcRenderer.send("disConnectServer_coc2h4",{address_CO:null,address_C2H4:this.address_C2H4});
      this.stopCircle();
      this.IsStartCircle = false;
      this.status_disconnected2();
    },

    change_C2H4(e) {
      this.address_C2H4 = e.target.value;

      localStorage.setItem("address_C2H4", e.target.value);
    },

    onChange2(value) {
      this.number2 = value;
    },


    startCircle() {
      this.circleDo();
      this.circleInterval = setInterval(() => {
        this.circleDo();
      }, Number(this.number2) * 1000);
    },

    stopCircle() {
      clearInterval(this.circleInterval);
      this.circleInterval = null;
    },

    circleDo() {



      this.$refs.current.refresh();
      this.$refs.history_c2h4.getData();

    },
    checkedChange(value) {
      this.checked = value;
    },


    setTel(e) {
      this.tel = e.target.value;
      localStorage.setItem("tel", e.target.value);
    },


  },
};
</script>

<style lang="less" >


.controlBar {
  height: 10%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-radius: 10px;
  margin-top: 10px;

  .left {
    .ant-input-number {
      margin: 0 10px;
    }

    .ant-btn {
      margin-left: 10px;
    }
  }

  .right {
display: flex;
align-items: center;
    .ant-input,
    .status,
    .ant-btn {
      margin-left: 10px;
    }
  }

  .ant-input {
    width: 200px;
  }

  .status {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #ff0000;
    margin-right: 5px;
  }
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .top {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px;

  }

  .bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

}

.status {
  background-color: #ff0000;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
</style>
